<template>
	<view class="container">
		<image class="activity-img" :src="vdata.activityDetail.activityImg"></image>
		<view class="name">
			<view v-if="vdata.activityDetail.state === 4">进行中</view>
			<view v-else style="background-color: darkorange;">已结束</view>
			<view>{{ vdata.activityDetail.activityName }}</view>
		</view>
		<view class="row">
			<image class="icon" src="@/static/new/businessCircle/icon-coupon.png"></image>
			<text>{{ vdata.activityDetail.activityTypeName }}</text>
		</view>
		<view class="row">
			<image class="icon" src="@/static/new/businessCircle/icon-date.png"></image>
			{{ dayjs(vdata.activityDetail.startTime).format('YYYY[年]M[月]D[日]') }}~{{
			dayjs(vdata.activityDetail.endTime).format('YYYY[年]M[月]D[日]') }}
		</view>
		<view class="line"></view>
		<view class="row tip">
			<image class="icon" src="@/static/new/businessCircle/icon-tip.png"></image>
			<text>{{ vdata.activityDetail.remark?.replace(/\\n/g, "\n") }}</text>
		</view>
	</view>
</template>

<script setup>
import dayjs from 'dayjs'
import { $fansActivityDetail } from '@/http/apiManager.js'
import { onLoad } from '@dcloudio/uni-app';
import { reactive } from 'vue'
import { formatRichText } from '@/util/htmlUtil.js'

const vdata = reactive({
	activityDetail: {},	// 活动详情
})

onLoad(async ({ activityId }) => {
	await $fansActivityDetail({ activityId }).then(({ bizData }) => {
		Object.assign(vdata.activityDetail, { ...bizData.detail, remark: formatRichText(bizData.detail.remark) })
	})
})
</script>

<style lang="less">
.container {
	width: 100%;
	min-height: 100vh;
	padding: 32rpx;
	box-sizing: border-box;
	overflow: hidden;

	.activity-img {
		width: 100%;
		height: 380rpx;
		border-radius: 16rpx;
	}

	.name {
		margin-top: 36rpx;
		display: flex;
		align-items: center;
		gap: 12rpx;

		view {
			&:nth-child(1) {
				display: inline-block;
				background-color: #24C789;
				transform: skewX(-20deg);
				padding: 6rpx 10rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				border-radius: 12rpx;
				font-weight: bold;
			}

			&:nth-child(2) {
				font-weight: bold;
				font-size: 38rpx;
				color: #333333;
			}
		}
	}

	.row {
		position: relative;
		padding-left: 38rpx;
		font-size: 26rpx;
		color: #A0A9C0;
		margin-top: 24rpx;

		.icon {
			width: 26rpx;
			height: 26rpx;
			position: absolute;
			left: 0rpx;
			top: 5rpx;
		}

		view {
			&:nth-child(n + 2) {
				margin-top: 24rpx;
			}
		}
	}

	.line {
		height: 2rpx;
		background-color: #F3F3F3;
		margin: 30rpx 0;
	}
}
</style>